<template>
  <div class="summary-container">
    <div class="cz-con con">
      <div class="title">
        <span class="line"></span>
        <span>充值</span>
      </div>
      <div class="cards">
        <div class="card-item card-item1">
          <span class="span1">f充值总额</span>
          <span class="span2">￥{{(allData.charge*0.01).toFixed(2) }}</span>
          <span class="span3">总金额</span>
        </div>
        <div class="card-item card-item2">
          <span class="span1">已消费金额</span>
          <span class="span2">￥{{ (allData.consume*0.01).toFixed(2)}}</span>
          <span class="span3">总消费</span>
        </div>
        <div class="card-item card-item3">
          <span class="span1">账户余额</span>
          <span class="span2">￥{{(allData.balance*0.01).toFixed(2)  }}</span>
          <span class="span3">总余额</span>
        </div>
      </div>
    </div>

    <div style="display: flex;">
      <div class="fp-con con">
        <div class="title">
          <span class="line"></span>
          <span>发票</span>
        </div>
        <div class="cardfs">
          <div class="card">
            <span class="line line1"></span>
            <span class="card-con">
              <span>发票总金额</span>
              <span class="card-je">￥{{(allData.invoiceAll*0.01).toFixed(2) }}</span>
            </span>
          </div>
          <div class="card-line"></div>
          <div class="card">
            <span class="line line2"></span>
            <span class="card-con">
              <span>已开发票金额</span>
              <span class="card-je">￥{{(allData.invoiceSend*0.01).toFixed(2) }}</span>
            </span>
          </div>
          <div class="card-line"></div>
          <div class="card">
            <span class="line line3"></span>
            <span class="card-con">
              <span>可开发票金额</span>
              <span class="card-je">￥{{(allData.invoice*0.01).toFixed(2) }}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="yh-con con">
        <div class="title">
          <span class="line"></span>
          <span>优惠概览</span>
        </div>

        <div class="cardfs">
          <div class="card">
            <span class="line line2"></span>
            <span class="card-con">
              <span>未使用优惠券</span>
              <span class="card-je">￥{{(allData.couponNotUse*0.01).toFixed(2) }}</span>
            </span>
            <span class="border1">
              <span class="span-m">
                <span>{{ allData.couponNotUseCount }}</span>
                <span class="span-m-p2">张</span>
              </span>
            </span>
          </div>

          <div class="card-line"></div>

          <div class="card">
            <span class="line line1"></span>
            <span class="card-con">
              <span>即将过期</span>
              <span class="card-je">￥{{(allData.couponWillExpire*0.01).toFixed(2) }}</span>
            </span>
            <span class="border2">
              <span class="span-m">
                <span>{{ allData.couponWillExpireCount }}</span>
                <span class="span-m-p2">张</span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="tg-con con">
      <div class="title">
        <span class="line"></span>
        <span>推广信息 </span>
      </div>

      <div class="cardtgs">
        <div class="cardtgss">
          <div v-for="(item, index) in txts1" class="cardtgss-item">
            <span class="item-con">
              <span class="circle1"></span>
              <span class="span2">{{ item.title }}</span>
            </span>
            <span class="item-p2">{{ item.value }}</span>
          </div>
        </div>

        <div class="cardtgss">
          <div v-for="(item, index) in txts2" class="cardtgss-item">
            <span class="item-con">
              <span class="circle2"></span>
              <span class="span2">{{ item.title }}</span>
            </span>
            <span class="item-p2">{{ item.value }}</span>
          </div>
        </div>
        <div class="cardtgss">
          <div v-for="(item, index) in txts3" class="cardtgss-item">
            <span class="item-con">
              <span class="circle3"></span>
              <span class="span2">{{ item.title }}</span>
            </span>
            <span class="item-p2">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import { trace } from "../../utils/trace";
import {mapGetters} from "vuex"

export default {
  name: "agreement",
  data() {
    return {
      txts1: [
        { title: "总计推广链接" },
        { title: "总计关键词" },
        { title: "已启用" },
        { title: "审核未通过" },
        { title: "已到期" }
      ],
      txts2: [
        { title: "服务推广链接" },
        { title: "服务关键词" },
        { title: "已启用" },
        { title: "审核未通过" },
        { title: "已到期" }
      ],
      txts3: [
        { title: "企业推广链接" },
        { title: "企业关键词" },
        { title: "已启用" },
        { title: "审核未通过" },
        { title: "已到期" }
      ],
      allData: {}
    };
  },
  mounted: function() {

    let path = "summary/sum_main";
    //  用户角色
    // "role":  1 管理员; 2  业企业户 3 运营人员 4 财务人员 5 客服
    // if(!this.userInfo){
    //   this.navs = [];
    //   return
    // }
    // if (this.userInfo.role === 1||this.userInfo.role === 3||this.userInfo.role === 4) {                         //管理端
    //   path = "summary/sum_global"
    // }else{
    //   path = "summary/sum_main"
    // }

    this.$store.dispatch(path).then(data => {
      this.allData = data;
      var ii = 0;
      this.txts2[ii].value = this.allData.link;
      this.txts3[ii].value = this.allData.film;
      ii = 1;
      this.txts2[ii].value = this.allData.linkWord;
      this.txts3[ii].value = this.allData.filmWord;
      ii = 2;
      this.txts2[ii].value = this.allData.linkOn;
      this.txts3[ii].value = this.allData.filmOn;
      ii = 3;
      this.txts2[ii].value = this.allData.linkFail;
      this.txts3[ii].value = this.allData.filmFail;
      ii = 4;
      this.txts2[ii].value = this.allData.linkExpire;
      this.txts3[ii].value = this.allData.filmExpire;

      for (var i = 0; i < 5; i++) {
        this.txts1[i].value = this.txts2[i].value + this.txts3[i].value;
      }
      this.txts1[0].value = this.allData.link;
    });
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  computed:{
    ...mapGetters(["userInfo"]),
  },
  methods: {
    register: function() {
      this.$router.push({ path: "/register" });
    }
  }
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: black;
$cursor: black;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .register-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.summary-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      -webkit-appearance: none;
      border-radius: 5px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    /*border: 1px solid rgba(0, 0, 0, 0.3);*/
    /*background: transparent;*/
    /*border-radius: 5px;*/
    color: black;
  }
}
</style>

<style lang="scss" scoped>
$bg: #f6f7fb;
$dark_gray: #889aa4;
$light_gray: #eee;
$main_color: #134bde;

.summary-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .con {
    background-color: white;
    border-radius: 10px;
    margin: 36px 36px 0 36px;

    .title {
      padding: 30px 40px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      display: flex;
      align-items: center;

      .line {
        width: 4px;
        height: 19px;
        background: #134bdf;
        border-radius: 2px;
        display: inline-flex;
        margin-right: 10px;
      }
    }

    .cards {
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 1rem 36px;

      .card-item1 {
        background-image: url(../../assets/summary/bg1.png);
      }

      .card-item2 {
        background-image: url(../../assets/summary/bg2.png);
      }

      .card-item3 {
        background-image: url(../../assets/summary/bg3.png);
      }

      .card-item {
        background-size: auto 100%;
        border-radius: 12px;
        background-repeat: no-repeat;
        background-position-x: right;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 30%;
        max-width: 455px;
        color: white;
        padding-left: 50px;

        span {
          /*height: 3rem;*/
          line-height: 2.6rem;
        }

        .span1 {
          margin-top: 0.6rem;
        }

        .span2 {
          font-size: 36px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 38px;
          margin-top: 1.5rem;
          margin-left: -0.5rem;
        }

        .span3 {
          font-size: 12px;
          color: #fffefe;
        }
      }
    }

    .cardfs {
      position: relative;
      width: 100%;
      display: flex;
      padding: 16px 36px;
      justify-content: space-around;
      align-items: center;

      .card-line {
        width: 1px;
        height: 108px;
        background: #f0f0f0;
      }

      .card {
        display: flex;
        height: 70px;

        .line {
          width: 7px;
          height: 68px;
          border-radius: 3px;
          margin-right: 0.6rem;
        }

        .card-con {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          margin-left: 0.5rem;
        }

        .line1 {
          background: linear-gradient(0deg, #ffb128 8%, #faddaa 100%);
        }

        .line2 {
          background: linear-gradient(0deg, #134bdf 0%, #6ca6ff 90%);
        }

        .line3 {
          background: linear-gradient(0deg, #19dc63 8%, #c4ffda 100%);
        }

        .card-je {
          font-size: 34px;
          font-family: DINNextW1G;
          font-weight: 400;
          color: #333333;
          line-height: 38px;
          margin-left: -0.5rem;
        }
        .span-m {
          margin: auto;
          width: 3.6rem;
          height: 3.6rem;
          background-color: white;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;

          .span-m-p2 {
            font-size: 1rem;
            margin-bottom: -0.5rem;
            margin-left: 0.2rem;
          }
        }

        .border1 {
          width: 5rem;
          height: 5rem;

          border-image: linear-gradient(0deg, #202020, #134bdf, #6ca6ff) 10 10;
          background: linear-gradient(
            0deg,
            #202020 0%,
            #134bdf 0%,
            #6ca6ff 100%
          );
          border-radius: 20px;
          border: 5px solid #fff;
          display: flex;
          margin-left: 2.5rem;

          font-size: 36px;
          font-family: DINNextW1G;
          font-weight: 400;
          color: #134bdf;
        }

        .border2 {
          width: 5rem;
          height: 5rem;
          border-image: linear-gradient(0deg, #202020, #ffb128, #fadda9) 10 10;
          background: linear-gradient(
            0deg,
            #202020 0%,
            #ffb128 0%,
            #fadda9 100%
          );
          border-radius: 20px;
          border: 5px solid #fff;
          display: flex;
          margin-left: 2.5rem;

          font-size: 36px;
          font-family: DINNextW1G;
          font-weight: 400;
          color: #ffb128;
        }
      }
    }

    .cardtgs {
      position: relative;
      margin-bottom: 2rem;

      .cardtgss {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 1rem 36px;
        border-bottom: 1px solid #f0f0f0;

        .cardtgss-item {
          position: relative;
          display: flex;
          flex-direction: column;
          /*align-items: center;*/
          width: 8rem;

          .item-con {
            align-items: center;
            display: flex;
          }

          .sp2 {
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #666666;
          }

          .item-p2 {
            font-size: 2.2rem;
            font-family: DINNextW1G;
            font-weight: 400;
            color: #333333;
            margin-top: 1rem;
          }

          .circle1 {
            width: 10px;
            height: 10px;
            background: #134bdf;
            border-radius: 4px;
            display: inline-flex;
            margin-right: 5px;
          }

          .circle2 {
            width: 10px;
            height: 10px;
            background: #19dc63;
            border-radius: 4px;
            display: inline-flex;
            margin-right: 5px;
          }

          .circle3 {
            width: 10px;
            height: 10px;
            background: #ffb93d;
            border-radius: 4px;
            display: inline-flex;
            margin-right: 5px;
          }
        }
      }
    }
  }

  .fp-con,
  .yh-con {
    width: 50%;
  }
  .fp-con {
    margin-right: 18px;
  }
  .yh-con {
    margin-left: 18px;
  }
}
</style>
